<template>
  <div>
    <template>
      <el-dialog title="会员卡排序" :visible.sync="dialogVisible" :close-on-click-modal="false" width="750px">
        <card-order-edit ref="editCardOrder" v-loading="loading" element-loading-text="排序中" />
        <div slot="footer" class="dialog-footer">
          <el-button round size="small" @click="hide">取 消</el-button>
          <el-button type="primary" round size="small" @click="handleSubmit">保 存</el-button>
        </div>
      </el-dialog>
    </template>
  </div>
</template>
<script>
import CardOrderEdit from './CardOrderEdit'
import { editCardOrder } from '@/api/vip'
export default {
  components: {
    CardOrderEdit
  },
  data() {
    return {
      // 配置
      resolve: null,
      reject: null,
      // 状态
      dialogVisible: false,
      loading: false
    }
  },
  methods: {
    open() {
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    hide() {
      this.dialogVisible = false
    },

    show() {
      this.dialogVisible = true
    },

    // 提交更新
    handleSubmit() {
      const orderObj = {}
      this.$refs.editCardOrder.list.forEach(function(value, index) {
        orderObj[value.id] = index + 1
      })
      this.loading = true
      editCardOrder(orderObj).then(res => {
        this.loading = false
        this.$notify({
          title: '成功',
          message: '会员卡已成功重新排序',
          type: 'success',
          offset: 40,
          duration: 2000
        })
        this.resolve && this.resolve()
        this.hide()
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
